// 功能四：全选或者取消全选功能；
window.onload = function(){
    // 获取所有列表前面的checkbox
    let checkBoxs = document.querySelectorAll(".item-check-btn");
    checkBoxs.forEach(checkEle =>{
        checkEle.isCheck = false;
        checkEle.onclick = function(){
            if( !checkEle.isCheck){
                // checkEle.className += ' check';
                checkEle.classList.add("check");
            }else{
                // checkEle.className = 'item-check-btn'
                checkEle.classList.remove("check");
            }
           this.isCheck = !this.isCheck;
           isCheckAll();
        }
    })



    // 实现加和减的功能  ，通过事件委托
    let eles = document.querySelectorAll(".quentity");
    eles.forEach(ele=>{
        ele.onclick = function(e){
            var e = e || window.event;
            // console.log(e.target);
            // 把点击+ 和 -的事假委托给 外层容器quentity
            if(e.target.innerText==='-'){
                // console.log("点击了-号");
                let num = e.target.nextElementSibling.value;
                // console.log(num);
                if(num>1){
                    e.target.nextElementSibling.value = parseInt(e.target.nextElementSibling.value)-1;
                }
            }else if(e.target.innerText==='+'){
                // console.log("点击了+号");
                let num = e.target.previousElementSibling.value;
                // console.log(num)
                e.target.previousElementSibling.value = parseInt(e.target.previousElementSibling.value)+1;
            }

            // 计算每一条的总金额
            // 获取 单价 
            let priceEle = ele.parentNode.parentNode.parentNode.previousElementSibling.querySelector(".item-price");
            let price = parseInt( priceEle.innerText.substr(1));
            let num = ele.querySelector("input").value;
            // console.log(num);
            let total = price*num;
            let totalEle = ele.parentNode.parentNode.parentNode.nextElementSibling.querySelector(".item-price-total");
            // console.log(totalEle)
            totalEle.innerText = total;
        }
    })



    // 删除商品的功能 
    // 获取所有的删除按钮
    let delEles = document.querySelectorAll(".item-edit-btn");
    // 获取遮罩层 
    let showModalEle = document.querySelector("#showModal");
    let showOverLayEle = document.querySelector("#showOverLay");

    let btnModalConfirmEle = document.querySelector("#btnModalConfirm");
    delEles.forEach(delEle=>{
        delEle.onclick = function(){
            // console.log("点击了删除");
            // 点击删除的时候需要显示是否删除的对话框
            showModalEle.classList.add("md-show");
            showOverLayEle.classList.add("md-overlay");
             // 点击确定后的操作
             btnModalConfirmEle.onclick = function(){
                //  删除点击这一行的li
                // console.log(delEle);
            //    console.log(delEle.parentNode.parentNode.parentNode)
                delEle.parentNode.parentNode.parentNode.remove();
                showModalEle.classList.remove("md-show");
                showOverLayEle.classList.remove("md-overlay");
             }
        }
    })


    // 是否删除对话框的一些操作
    // 点击取消
    document.querySelector("#btnModalCancel").onclick = function(){
        showModalEle.classList.remove("md-show");
        showOverLayEle.classList.remove("md-overlay");
    }
    document.querySelector(".md-close").onclick = function(){
        showModalEle.classList.remove("md-show");
        showOverLayEle.classList.remove("md-overlay");
    }



    // 全选或者取消全选功能
    // 获取全选的按钮
    // 点击全选选中所有
    let checkAll = document.querySelector(".item-all-check");
    checkAll.onclick = function(){
        checkBoxs.forEach(checkEle=>{
            checkEle.isCheck = true;  //为后面勾选之后计算总数做打算
            checkEle.classList.add("check");
        })
    }
    // 点击取消全选 不选中所有
    let cancelCheckEle = document.querySelector(".item-all-del");
    cancelCheckEle.onclick = function(){
        checkBoxs.forEach(checkEle=>{
            checkEle.isCheck = false;  //为后面勾选之后计算总数做打算
            checkEle.classList.remove("check");
        })
    }


    // 勾选之后 要全选或者不全选 
    // console.log(checkBoxs);
    // 一、是每个元素会有一个isCheck属性和勾选关联
    // 二、运用every来判断是否全选；
    function isCheckAll(){
        let arr = [...checkBoxs]
        arr.pop();
        // console.log(arr);
        let checkAll = arr.every(item=>item.isCheck);
        // console.log(checkAll);
        if(checkAll){
            // 全选了
            document.querySelector(".item-all-check .item-check-btn").classList.add("check");
        }else{
            // 不是全选
            document.querySelector(".item-all-check .item-check-btn").classList.remove("check");
        }
    }
    // isCheckAll();
}